<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>首页</title>
    <c:set value="${pageContext.request.contextPath}" var="path" scope="page" />
    <link rel="stylesheet" href="${path}/static/style/bootstrap4.5.0.min.css">
    <link rel="stylesheet" href="${path}/static/style/index.css">
</head>

<body>
    <div class="container">
        <header class="d-flex justify-content-between">
            <ul class="nav rounded">
                <li class="nav-item">
                    <a class="nav-link active" href="/ContactPerson/index">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/ContactPerson/sort">分类</a>
                </li>
                <li class="nav-item">
                    <span class="nav-link add-btn">新增</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/ContactPerson/logout">退出</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0" class="position-relative">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
                    id="search-inp">
                <ul class="list-group smart-tip position-absolute"></ul>
                <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
            </form>
        </header>
        <main class="d-flex flex-wrap">
            <c:forEach items="${links}" var="link">
                <div class="card" style="width: 21rem;">
                    <div class="card-body rounded">
                        <h5 class="card-title" id="link-card-name">${link.name}</h5>
                        <p class="card-text">
                        <ul>
                            <li id="link-card-id" style="display: none;">${link.id}</li>
                            <li><span class="item-label">分组</span><span class="item-content"
                                    id="link-card-type">${link.type.name}</span>
                            </li>
                            <li><span class="item-label">手机</span><span class="item-content"
                                    id="link-card-phone">${link.phone}</span></li>
                            <li><span class="item-label">邮箱</span><span class="item-content"
                                    id="link-card-email">${link.email}</span></li>
                        </ul>
                        </p>
                        <button type="button" class="btn btn-outline-success change-btn">change</button>
                        <a href="/ContactPerson/del?id=${link.id}" class="btn btn-outline-danger">delete</a>
                    </div>
                </div>
            </c:forEach>
        </main>
    </div>
    <div id="add" class="position-fixed d-flex justify-content-center align-items-center">
        <form class="edit-form shadow p-3 mb-5 rounded" method="post" action="/ContactPerson/change">
            <input type="text" id="linkId" name="linkId" style="display: none;">
            <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="name" name="name">
            </div>
            <div class="form-group">
                <label for="">分组</label>
                <select class="form-control" name="type" id="type">
                    <option value="1">亲人</option>
                    <option value="2">同事</option>
                    <option value="3">同学</option>
                    <option value="4">朋友</option>
                </select>
            </div>
            <div class="form-group">
                <label for="">手机</label>
                <input type="text" class="form-control" id="phone" name="phone">
            </div>
            <div class="form-group">
                <label for="">邮箱</label>
                <input type="text" class="form-control" id="email" name="email">
            </div>
            <button type="submit" class="btn btn-outline-success submit-change-btn">提交</button>
            <button type="reset" class="btn btn-outline-danger cancle-change-btn">退出</button>
        </form>
    </div>
    <script src="${path}/static/script/jquery3.5.1.slim.min.js"></script>
    <script src="${path}/static/script/popper1.16.0.min.js"></script>
    <script src="${path}/static/script/bootstrap4.5.0.min.js"></script>
    <script src="${path}/static/script/jQuery 3.5.1.min.js"></script>
    <script src="${path}/static/script/base.js"></script>
</body>

</html>